import React, { Component } from 'react'
import { Tabs, Toast } from 'antd-mobile'
import { NavBar, Item, Icon, Image, FlatList } from 'components'
import { post, msg, NotOrder } from '../../../utils'

export default class MyOrder extends Component<any, any> {

    public state = {
        tabs: [
            { title: '全部', index: 0 },
            { title: '待付款', index: 1 },
            { title: '待发货', index: 2 },
            { title: '待收货', index: 3 },
            { title: '已完成', index: 4 },
        ]
    }

    private tabs = [
        { index: 1 },
        { index: 1 },
        { index: 1 },
        { index: 1 },
        { index: 1 },
        { index: 1 }
    ]

    public render(): JSX.Element {
        const { tabs } = this.state
        const { orderData, orderIndex } = this.props
        return (
            <section className="myOrder">
                <NavBar
                    title={<span style={{ fontSize: '0.97rem', color: '#222' }}>我的订单</span>}
                    fixed={true}
                />
                <div className="myOrder_tabs">
                    <Tabs
                        initialPage={orderIndex}
                        tabBarActiveTextColor="#222"
                        swipeable={false}
                        tabs={tabs}
                        prerenderingSiblingsNumber={0}
                        renderTab={
                            (item) => {
                                const { SET_USER_ORDER_INDEX } = this.props
                                return (
                                    <div
                                        className={(item.index === orderIndex) ? 'myOrder_tabs_active' : 'myOrder_tabs_default'}
                                        onClick={() => { SET_USER_ORDER_INDEX(item.index) }}
                                    >
                                        {item.title}
                                    </div>
                                )
                            }
                        }
                    >
                        <FlatList
                            className="myOrder_all"
                            data={orderData[0]}
                            ListEmptyComponent={NotOrder()}
                            renderItem={((item: any, index: number) => {
                                return <div key={index}>{this.getAllOrder(item, item.status, index)}</div>
                            })}
                            onRefresh={this.getData.bind(this, 0)}
                        />
                        {/* 待付款 */}
                        <FlatList
                            className="myOrder_obligations"
                            data={orderData[1]}
                            ListEmptyComponent={NotOrder('待付款')}
                            onRefresh={this.getData.bind(this, 1)}
                            renderItem={((item: any, index: number) => {
                                return <div key={index}>{this.getAllOrder(item, 1, index)}</div>
                            })}
                        />
                        {/* 代发货 */}
                        <FlatList
                            className="myOrder_delivergoods"
                            data={orderData[2]}
                            ListEmptyComponent={NotOrder('代发货')}
                            onRefresh={this.getData.bind(this, 2)}
                            renderItem={((item: any, index: number) => {
                                return <div key={index}>{this.getAllOrder(item, 2, index)}</div>
                            })}
                        />
                        {/* 待收货 */}
                        <FlatList
                            className="myOrder_receivedgoods"
                            data={orderData[3]}
                            ListEmptyComponent={NotOrder('待收货')}
                            onRefresh={this.getData.bind(this, 3)}
                            renderItem={((item: any, index: number) => {
                                return <div key={index}>{this.getAllOrder(item, 3, index)}</div>
                            })}
                        />
                        {/* 已完成 */}
                        <FlatList
                            className="myOrder_orderComplete"
                            data={orderData[4]}
                            ListEmptyComponent={NotOrder('已完成')}
                            onRefresh={this.getData.bind(this, 4)}
                            renderItem={((item: any, index: number) => {
                                return <div key={index}>{this.getAllOrder(item, 4, index)}</div>
                            })}
                        />
                    </Tabs>
                </div>
            </section>
        )
    }

    private getData = (status: number, finishLoad: () => void) => {
        const { userInfo, SET_USER_ORDERDATA, orderData } = this.props
        const page = this.tabs[status].index
        post('orderapi/orderList', {
            userId: userInfo.id,
            status,
            page
        }).then((data: any) => {
            if (page === 1) {
                SET_USER_ORDERDATA(data.data, status)
                finishLoad()
            } else {
                if (data.data.length) {
                    const val: any[] = [...orderData[status]]
                    SET_USER_ORDERDATA(val.concat(data.data), status)
                    finishLoad()
                }
            }
            this.tabs[status].index++
        })

    }

    private getPlayStatus(status: number) {
        switch (status) {
            case 1: return '等待付款'
            case 2: return '等待发货'
            case 3: return '等待收货'
            default: return
        }
    }

    private getAllOrder = (item: any, status: number, index: number) => {
        return (
            <div className="myOrder_obligations_card">
                <Item
                    title={<div className="myOrder_obligations_card_title">
                        <Icon className="myOrder_obligations_card_title_shopIcon" type="shop" />
                        <span className="myOrder_obligations_card_title_text">{item.get_seller_name && item.get_seller_name.name}</span>
                        <Icon className="myOrder_obligations_card_title_rightIcon" type="arrow_right" />
                        {status === 4 && <img className="myOrder_orderComplete_card_title_img" src={require('../../../assets/order_complete.png')} />}
                    </div>}
                    value={this.getStatusRight(status)}
                />
                {/* 物流信息 */}
                {(status === 2 || status === 3) && (<div className="myOrder_receivedgoods_card_logistics">
                    <div className="myOrder_receivedgoods_card_logistics_icon">
                        <Icon type="truck" />
                    </div>
                    <div className="myOrder_receivedgoods_card_logistics_info">
                        <span>请等待商家发货</span>
                        <span>{item.create_time}</span>
                    </div>
                </div>)}
                <div
                    onClick={() => { this.gotoUrl('/My/obligationsDetail/' + item.id) }}
                >
                    {this.getShopInfo(item.get_order_goods)}
                </div>
                <div className="myOrder_obligations_card_goodsPrice">
                    <div>共{item.get_order_goods.length}件商品 &nbsp;</div>
                    <div>需付款：<span className="DINPro">￥</span><span className="DINPro">{this.getOrderPrice(item.get_order_goods)}</span><span>恒豆</span></div>
                </div>
                {this.getBotBtn(status, item, index)}
            </div>
        )
    }

    private getStatusRight(status: number) {
        switch (status) {
            case 4: return <span className="myOrder_orderComplete_card_title_status"><Icon type="delete" /></span>
            case 7: return <span className="myOrder_orderCancel_card_title_status"> <span>已取消</span><Icon type="delete" /></span>
            default: return <span className="myOrder_obligations_card_title_status">{this.getPlayStatus(status)}</span>
        }
    }
    private getBotBtn(status: number, item: any, index: number) {
        switch (status) {
            case 1: return (
                <div className="myOrder_obligations_card_paybtn">
                    <span onClick={() => { const { SET_BEANS_ORDER } = this.props; SET_BEANS_ORDER({ price: item.price }); this.gotoUrl(`/selectPay/?id=3&orderId=${item.order_pay_id}`) }}>去支付</span>
                </div>
            )
            case 2: return (
                <div className="myOrder_receivedgoods_card_operation">
                    <span onClick={() => { this.gotoUrl(`/fillOrder?id=${item.id}&type=2`) }}>再次购买</span>
                    <span onClick={this.orderTip.bind(this, item.id)}>提醒发货</span>
                </div>
            )
            case 3: return (
                <div className="myOrder_receivedgoods_card_operation">
                    <span onClick={() => { this.gotoUrl(`/fillOrder?id=${item.id}&type=2`) }}>再次购买</span>
                    <span onClick={() => { this.gotoUrl(`/My/orderLogistics/${item.id}`) }}>查看物流</span>
                    <span onClick={this.handleOrderStatus.bind(this, '确认收货么？', 4, '操作成功', item, index)}>确认收货</span>
                </div>
            )
            case 4: return (
                <div className="myOrder_receivedgoods_card_operation">
                    <span onClick={() => { this.gotoUrl(`/fillOrder?id=${item.id}&type=2`) }}>再次购买</span>
                </div>
            )
            case 7: return (
                <div className="myOrder_receivedgoods_card_operation">
                    <span onClick={() => { this.gotoUrl(`/fillOrder?id=${item.id}&type=2`) }}>再次购买</span>
                </div>
            )
            default: return
        }
    }
    private orderTip(id: string) {
        const { userInfo } = this.props
        post('orderapi/orderTip', {
            userId: userInfo.id,
            id
        }).then((data: any) => {
            Toast.info('已提醒卖家请耐心等待', 2)
        })
    }
    private handleOrderStatus = (message: string, status: number, msgInfo: string, item: any, index: number) => {
        const { userInfo, orderData, SET_USER_ORDERDATA } = this.props
        msg(message).then(() => {
            Toast.loading('', 0)
            post('orderapi/orderStatusHandle', {
                userId: userInfo.id,
                id: item.id,
                status
            }).then((data: any) => {
                const order = { ...orderData }
                order[3].splice(index, 1)
                Toast.info(msgInfo, 2)
                setTimeout(() => { Toast.hide(); SET_USER_ORDERDATA(order) }, 2000)
            })
        })
    }
    private gotoUrl = (url: string) => {
        this.props.history.push(url)
    }
    private getShopInfo = (itemData: any[] = []) => {
        let temp: any
        if (itemData.length < 2) {
            temp = itemData.map((item: any, index: number) => {
                return (
                    <div className="myOrder_obligations_card_goodsInfo" key={index}>
                        <div
                            className="myOrder_obligations_card_goodsInfo_img"
                        >
                            <Image src={item.pic} />
                        </div>
                        <div className="myOrder_obligations_card_goodsInfo_text">
                            {item.short_title}
                        </div>
                    </div>
                )
            })
        } else {
            temp = (
                <div className="myOrder_obligations_card_goodsInfo">
                    <div className="myOrder_obligations_card_goodsInfo_imgWrap">
                        {
                            itemData.map((item: any, index: number) => {
                                return (
                                    <div
                                        style={{ display: 'inline-block' }}
                                        key={index}
                                    >
                                        <Image src={item.pic} />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            )
        }
        return temp
    }
    private getOrderPrice = (orderGoods: any = []) => {
        let rmb = 0
        let hd = 0
        orderGoods.map((item: any, i: number) => {
            rmb += Number(item.price)
            hd += Number(item.price_q)
        })
        return rmb.toFixed(2) + ' + ' + hd
    }
}